//定义recordPaint()方法
function recordPaint(Elem,Data){
	//Elem代表画布,Data代表关键数据
	//1.创建画布对象
	var context=Elem.getContext("2d");
	// 2.获取画布的宽高
	const WIDTH=Elem.width;
	const HEIGHT=Elem.height;
	//3.定义坐标轴位于画布的边距
	var padding=20;  //初始边距
	var paddingLeft=60;  //钱的宽度
	var paddingBottom=30; //月份的高度
	//4.定义坐标轴的关键点的坐标
	// 4.1Y轴的上方坐标值
	var axisY={
		x:paddingLeft, //60
		y:padding  //20
	}
	// 4.2原点
	var origin={
		x:paddingLeft,    //60
		y:HEIGHT-paddingBottom
	}
	// 4.3x坐标轴
	var axisX={
		x:WIDTH-padding,
		y:HEIGHT-paddingBottom
	}
	//5.开始绘制坐标轴
	//开始的路径
	context.beginPath();
	//移动到y的上方坐标点
	context.moveTo(axisY.x,axisY.y);
	//移动到原点
	context.lineTo(origin.x,origin.y);
	//移动到x轴的坐标点
	context.lineTo(axisX.x,axisX.y);
	//绘制
	context.stroke();
	
	//6.绘制箭头
	context.beginPath();
	context.moveTo(axisY.x-5,axisY.y+5);
	context.lineTo(axisY.x,axisY.y);
	context.lineTo(axisY.x+5,axisY.y+5);
	//绘制
	context.stroke();
	
	//x轴箭头
	context.beginPath();
	context.moveTo(axisX.x-5,axisX.y-5);
	context.lineTo(axisX.x,axisX.y);
	context.lineTo(axisX.x-5,axisX.y+5);
	//绘图
	context.stroke();
	
	//7.绘制月份
	//创建月份对象
	var month={
		x:paddingLeft,
		y:HEIGHT-paddingBottom
	}
	//调整文字
	context.font='14px 微软雅黑';
	context.textBaseline='top'
	
	//存12个月的x轴坐标,用于折点的x轴坐标
	var PointsX=[];
	for(var i=1;i<=12;i++){
		PointsX[PointsX.length]=month.x;
		context.fillText(i+"月",month.x,month.y);  //将一月写入
		month.x+=(axisX.x-origin.x)/12;
	}
	
	//绘制金额
	//找到金额中最大的(找到最高点)
	var max=Math.max.apply(Math,Data);
	var moneyY=(origin.y-axisY.y)/(max/500+1);
	
	//创建金额的初始对象
	var money={
		x:axisY.x-5,
		y:axisY.y+moneyY,
		jin:max
	}
	//设置水平对齐
	context.textAlign="right";
	
	for(var i=0;i<max/500;i++){
		//绘制金额
		context.fillText(money.jin+"元",money.x,money.y);
		money.y+=moneyY;
		money.jin-=500;
	}
	
	//9.绘制折点
	//画出折线的点
	
	//找x坐标规律:12个折点就是12个月份的x坐标
	
	//找y坐标规律:总长度(3000到原点的距离)*金额/3000
	
	context.beginPath();
	
	//便利获取折点x,y的值
	for(var i=0;i<Data.length;i++){
		var pointY=origin.y-(origin.y-(axisY.y+moneyY))*Data[i]/max;
		var pointX=PointsX[i];
		
		if(i==0){
			//第一次循环添加起始点
			context.textAlign="left";
			context.textBaseline="bottom";
			context.moveTo(pointX,pointY)
		}else{
			context.lineTo(pointX,pointY)
			context.textAlign="center";
			context.textBaseline="bottom";
		}
		context.fillText(Data[i],pointX,pointY);
	}
	//绘图
	context.stroke();
	
	
	//10.绘制红点
	for(var i=0;i<Data.length;i++){
		var pointY=origin.y-(origin.y-(axisY.y+moneyY))*Data[i]/max;
		var pointX=PointsX[i];
		
		context.fillStyle='red';
		context.beginPath();
		context.arc(pointX,pointY,3,0,Math.PI*2)
		context.fill();
	}
	
	
}